<template>
    <view class="intro">
       <view>
           <view class="text">
               <textarea placeholder="请输入简介" value="{{my_remark}}" maxlength="30" bindinput="changeVal">
                   <text class="shuru"><text>{{word}}</text>/30</text>
               </textarea>
           </view>
           <view class="btn_box">
              <button class="button type_main" formType="submit" bindtap="commit()">提交</button>
           </view>
       </view>
    </view>
</template>
<script>
    import wepy from 'wepy';
    import api from '@/api/api';
    import {
        USER_INFO,USER_SPECICAL_INFO,USER_ID
    } from '@/utils/constant';

    export default class intro extends wepy.page {
        config = {  // 配置当前页面
            navigationBarTitleText: '简介',    // 头部标题
        }
        components = {

        }

        data = {
            my_remark:'',
            word:0
        }

        async modifyInfo() {
            let that = this;
            let user_id = wepy.getStorageSync(USER_ID) || '';
            api.updateUserInformation({
              query:{
                userId:user_id,
                key:'remark',
                value:that.my_remark
              },
              method:'PUT'
            },'userId='+user_id+'&key=remark&value='+that.my_remark).then(function(res){
              if(res.data.code == 0){
                wepy.navigateTo({
                  url: "/pages/personalCenter/userDetails"
                })
              }else{
                tip.error(res.data.msg)
              }
            })
        }

        onLoad(option){
            this.my_remark = option.remark;
            this.word = this.my_remark.length;
        }

        methods = {  // 方法
            commit(){
                let self = this;
                setTimeout(function() {
                    self.modifyInfo();
                },0)
            },
            changeVal(e){
                if (e.detail.value.length<=30) {
                    this.my_remark = e.detail.value;
                    this.word = this.my_remark.length;
                }else{
                    return;
                }
            }
        }
        events = {

        }
    }

</script>
<style lang="less">
    .intro{
        background: #fff;
        margin-top: 30rpx;
        >view{
            padding: 30rpx 40rpx;
        }
        .text{
            border: 1px solid #ddd;
            height: 240rpx;
            width: 100%;
            margin: 0 auto;
            border-radius: 6rpx;
            position: relative;
            textarea{
                padding: 20rpx;
                width: 94%!important;
                height: 200rpx!important;
                color: #999;
                .shuru{
                    position: absolute;
                    bottom: 20rpx;
                    right: 30rpx;
                    color: #666;
                }
            }
        }
        .btn_box{
            margin-top: 64rpx;
            margin-bottom: 64rpx;
            padding: 0 40rpx 50rpx 40rpx;
        }
    }
</style>
